Skip to main content

11 React Router

路由​

  1. 单页应用页面切换；
  2. 通过 URL 定位到页面；
  3. 语义的组织资源。

路由实现的基本架构​

唯一标识的路由定义，通过 Router 更新到组件容器中。

特性​

  1. 生命是路由定义；
  2. 动态路由。

实现方式​

  1. URL 路径；
  2. hash 路由，支持低版本浏览器；
  3. 内存路由，路由不会反映到浏览器 URL 中。

基于路由配置进行资源组织​

  1. 实现业务逻辑的低耦合；
  2. 易于扩展、重构和维护；
  3. 路由层面实现 Lazy Load。

React Router API​

  1. <Link>：普通链接，不会触发浏览器刷新；
  2. <NavLink>：类似 Link，会添加当前选中状态；
  3. <Prompt>：满足条件时提示用户是否离开当前页面；
  4. <Redirect>：重定向当前页面（登录跳转）；
  5. <Route>：路由匹配时显示对应组件；
  6. <Switch>：只显示第一个匹配的路由；

通过 URL 传递参数​

  1. 传递参数：<Route path="topic/:id" ... />；
  2. 获取参数：this.props.match.params；
  3. 正则匹配：path-to-regexp。

URL 参数的使用​

  1. 页面状态，URL 发生变化，Router 会使当前页面刷新；

嵌套路由​

  1. 每个 React 组件都可以是路由容器；
  2. Router 声明式语法可以方便定义嵌套路由；